<template>
    <el-container>
        <el-header v-if="!isDisabled">
            <div class="filter-container">
                <el-button
                        @click="item_moveUp"
                        v-if="itemIndex !== 0"
                        type="primary"
                        icon="el-icon-upload2"
                        circle></el-button>
                <el-button
                        @click="item_moveDown"
                        v-if="itemIndex !== answerCount-1"
                        type="success"
                        icon="el-icon-download"
                        circle></el-button>
                <el-button
                        @click="item_delQuestion"
                        type="danger"
                        icon="el-icon-delete"
                        circle></el-button>
            </div>
        </el-header>

        <el-main>
            <el-form
                    ref="dataForm"
                    :model="item_que"
                    label-position="center"
                    label-width="150px"
                    :class="[isDisabled?'normal':'no_normal']"
            >
                <p style="font-size: 18px;color: #3b91b6">章节项</p>
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-form-item
                                label="排序："
                                prop="viewSort"
                        >
                            <el-input  v-model="item_que.viewSort"  type="text" placeholder="问题序号,如1/I/一/①..." class="inputBox" :disabled="isDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item
                                label="章节描述："
                                prop="title"
                        >
                            <el-input  v-model="item_que.title"  type="text" placeholder="问题描述..." class="inputBox" :disabled="isDisabled"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item
                        label="章节备注/副标题："
                        prop="description"
                >
                    <el-input  v-model="item_que.description"  type="text" placeholder="问题备注..." class="inputBox" :disabled="isDisabled"></el-input>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer></el-footer>
    </el-container>
</template>

<script>
    export default {
        name: "new_head",
        data() {
            return {
                item_que:Object.assign({}, this.itemData)
            }
        },
        props: {
            itemData:Object,
            isDisabled:Boolean,
            answerCount:Number,
            itemIndex:Number,
            moveUp:Function,
            moveDown:Function,
            delQuestion:Function,
            itemUpDataItem:Function,
        },
        watch: {
            isDisabled: function(newVal){
                this.gotUpData()
            },
        },
        methods: {
            item_delQuestion(){
                this.delQuestion(this.itemIndex)
            },
            item_moveUp(){
                this.moveUp(this.itemIndex)
            },
            item_moveDown(){
                this.moveDown(this.itemIndex)
            },
            gotUpData(){
                this.itemUpDataItem(this.itemIndex,this.item_que);
            }
        }

    }
</script>

<style scoped>
    .normal{
        width: 95%; margin-left:20px;background: #e3e3e3;border:1px solid #000;
    }
    .no_normal{
        width: 95%; margin-left:20px;background: #fff;border:1px solid #000;
    }
</style>
